<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://eureka.yigolden.net/stringutils/sutaglib/1.0" prefix="su"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<title>消息中心</title>

  <!-- Bootstrap -->
    <link href="<%=request.getContextPath()%>/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="<%=request.getContextPath()%>/static/css/bootstrap-theme.min.css" rel="stylesheet">
    <link href="<%=request.getContextPath()%>/static/css/jumbotron.css" rel="stylesheet">
    
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="<%=request.getContextPath()%>/static/js/html5shiv.min.js"></script>
      <script src="<%=request.getContextPath()%>/static/js/respond.min.js"></script>
    <![endif]-->
       
 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="<%=request.getContextPath()%>/static/js/jquery.min.js"></script>
</head>
<body>

<jsp:include page="../Common/navHeader.jsp"></jsp:include>

<div class="container">

	  <br>
	  <br>       
      <div class="row">
          <div class="col-lg-3 col-sm-2"></div><!--左侧不用-->
          <div class="col-lg-6 col-sm-8 col-xs-12 text-center">
         	<h3>我的消息中心</h3>
         </div><!-- /.col-sm-4 -->
         <div class="col-lg-3 col-sm-2"></div><!--右侧不用-->
      </div>
       
      <br/>
      <br/>   
      
	  <div class="row">
      <div class="col-sm-1"></div>
      
      <div class="col-sm-2">
      <ul id="navLeftBar" class="nav nav-pills nav-stacked" role="tablist">
      	<li role="presentation" data-tag="sendbyme"><a href="<%=request.getContextPath() %>/Message/GetMessageSendByMe">我发送的消息</a></li>
      	<li role="presentation" data-tag="sendtome"><a href="<%=request.getContextPath() %>/Message/GetMessageSendToMe">发给我的消息</a></li>
      	<li role="presentation" data-tag="handled"><a href="<%=request.getContextPath() %>/Message/GetMessageHandled">已接受的消息</a></li>
      	<li role="presentation" data-tag="unhandled"><a href="<%=request.getContextPath() %>/Message/GetMessageUnhandled">未接受的消息</a></li>
      	<li role="presentation" data-tag="sendandhandled"><a href="<%=request.getContextPath() %>/Message/GetMessageSendAndHandled">已发已受消息</a></li>
      	<li role="presentation" data-tag="sendandunhandled"><a href="<%=request.getContextPath() %>/Message/GetMessageSendAndUnhandled">已发未受消息</a></li>      	
	  </ul>
	  </div>
      
      <div class="col-sm-8 col-xs-12">
	  
	  <c:set var="i" value="0" />
      <c:if test="${messages ne null }">         
  
	  <div class="table-responsive">
	    <table class="table table-hover table-stripped">
		  <tr style="background:aliceblue">
		    <td style="min-width:60px">发起者</td>
		    <td>接收者</td>
		    <td>发送时间</td>
		    <td>状态</td>
		    <td>操作</td>
		  </tr>
		  
		  <c:forEach var="item" items="${messages}">
		  
			<tr>
			  <td>
			  <c:if test="${tag eq 'sendtome' ||tag eq 'handled'||tag eq 'unhandled'  }">
			  <a href="<%=request.getContextPath() %>/Account/ShowUserDetailInfo?userid=${item.source }" target="_blank">
			  ${fn:escapeXml(item.sourcename)}
			  </a>
			  </c:if>
			  <c:if test="${tag ne 'sendtome' && tag ne 'handled' && tag ne 'unhandled' }">
			  ${fn:escapeXml(item.sourcename) }
			  </c:if>
			  </td>
			  <td>
			  <c:if test="${tag eq 'sendbyme' || tag eq 'sendandhandled' || tag eq 'sendandunhandled' }">
			  <a href="<%=request.getContextPath() %>/Account/ShowUserDetailInfo?userid=${item.destination }" target="_blank">
			  ${fn:escapeXml(item.destinationname) }
			  </a>
			  </c:if>
			  <c:if test="${tag ne 'sendbyme' && tag ne 'sendandhandled' && tag ne 'sendandunhandled'}">
			  ${fn:escapeXml(item.destinationname)}
			  </c:if>
			  </td>
			  <td>${fn:escapeXml(item.timeFormatted) }</td>
			  <td>
			  <c:if test="${fn:escapeXml(item.handle) eq 0}">
			  		未处理
			  </c:if>
			  <c:if test="${fn:escapeXml(item.handle) eq 1}">
			  		已处理
			  </c:if>
			  </td>
			   <td>
			   <c:if test="${fn:escapeXml(item.handle) eq 0}">
				   <c:if test="${tag eq 'sendbyme' || tag eq 'sendandunhandled'}">
					   <button class="btn btn-success updateMessage disabled" data-messageid="${item.messageid }">
					  	接受
					   </button>
				   </c:if>
				   <c:if test="${tag eq 'sendtome' || tag eq 'unhandled'}">
					   <button class="btn btn-success updateMessage" data-messageid="${item.messageid }">
					  	接受
					   </button>
				   </c:if>
			   </c:if>
			   <c:if test="${fn:escapeXml(item.handle) eq 1}">
			  		已接受
			   </c:if>
			  </td>
			</tr>
		  </c:forEach>
		</table>
	  </div>
	   
	  <br/>
      </c:if>
      
      <c:if test="${messages eq null }">  
        <div class="alert alert-warning" role="alert">
           	不好意思，暂时还没有符合条件的消息！
        </div>
      </c:if>
      <br/>

      </div>
      <div class="col-sm-1"></div><!--右侧不用-->
    </div>
 
    <jsp:include page="../Common/Footer.jsp"></jsp:include>

</div>

    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="<%=request.getContextPath()%>/static/js/bootstrap.min.js"></script>

    <script>
    $(function() {
    	$("#navLeftBar").find("li[data-tag='${tag }']").addClass("active");
    });
    </script>

	<script type="text/javascript">
    
    function submitForm(itemid){
    	
    	var formbyid=document.getElementById(itemid);
    	formbyid.submit();
    }
    
    window.updateMessageBusy = false;
    $(document).ready(function(){
    	
    	$("button.updateMessage").click(function(){
 			if ($(this).hasClass("disabled")){
 				alert("这是您发给别人的消息，您自己不能接受！");
 				return false;
 			}
    		
    		if(window.updateMessageBusy)
    			window.updateMessageBusy=false;
    		window.updateMessageBusy=true;
    		
    		$("button.updateMessage").addClass("disabled");
    		var messageid=$(this).data("messageid");
    		var postData={ messageid : messageid };
    		
    		$.ajax({

    			method:"POST",
    			url:"<%=request.getContextPath()%>/Message/UpdateMyMessage",
    			ContentType:"application/json",
    			data:JSON.stringify(postData),
    			dataType:"json",
    			success:function(data){
    				if(data.status==0){
    					alert("接受成功！");
    					window.location.reload();
    				}else{
    					alert(data.message);
    				}
    			},
    			error:function(){
    				alert("服务器连接失败！");
    			},
    			complete:function(){
    				$("button.updateMessage").removeClass("disabled");
    				window.updateMessageBusy=false;
    			}
    			
    		});
    		return false;
    	});
    });
    
    </script>
</body>
</html>